<template>
  <div class="word-slide">
    <div class="word-cnt">
      <div class="word-bg" v-for="(el, k) in list" :key="k">
        <template v-if="el.list.length">
          <div :class="['word-each', `word-each-${i + 1}`]" v-for="(item, i) in el.list" :key="i">
            <img v-if="i <= 2" :src="require(`@/assets/Image/c-${i + 1}.png`)" width="13px" alt="" />
            <div v-else class="word-circle">{{ i + 1 }}</div>
            {{ item.hotWorld }}
          </div>
        </template>
        <div class="word-empty" v-else>没有热词</div>
        <div class="word-date">{{ moment(el.time).format('MM-DD') }}</div>
      </div>
      <!-- <div class="c-bd"></div>
      <div class="c-bd c-bd2"></div> -->

      <div class="word-left" @click="next(1)">
        <a-icon type="caret-left" />
      </div>
      <div class="word-right" @click="next(2)">
        <a-icon type="caret-right" />
      </div>
    </div>
  </div>
</template>
<script>
import { getHotWorldEvent } from '@/api/serve';
import moment from 'moment';

const timeRang = {
  value: 0
};

const defaultList = () => {
  return [
    {
      time: moment().add(timeRang.value, 'days').format('YYYY-MM-DD'),
      list: []
    },
    {
      time: moment().add(timeRang.value + 1, 'days').format('YYYY-MM-DD'),
      list: []
    },
    {
      time: moment().add(timeRang.value + 2, 'days').format('YYYY-MM-DD'),
      list: []
    }
  ];
};

export default {
  props: {
    data: {
      type: Array,
      default: () => {}
    },
    id: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      step: 0,
      moment,
      list: JSON.parse(JSON.stringify(defaultList())),
      data1: {
        time: moment().subtract(0, 'days').format('YYYY-MM-DD'),
        list: []
      },
      data2: {
        time: moment().subtract(1, 'days').format('YYYY-MM-DD'),
        list: []
      },
      data3: {
        time: moment().subtract(2, 'days').format('YYYY-MM-DD'),
        list: []
      }
    };
  },
  created() {
    console.log(this.data1);
    this.getHotWorldEvent();
  },
  methods: {
    getHotWorldEvent() {
      const serve = [];
      this.list.forEach(e => {
        serve.push(getHotWorldEvent({
          eventId: this.id,
          start: e.time,
          end: e.time
        }));
      });
      Promise.all(serve).then(res => {
        console.log(res, 'res');
        res.forEach((e, i) => {
          this.list[i].list = e.data.records;
        });
         console.log(this.list);
      });
    },
    next(type) {
      if (type == 2) {
        timeRang.value = timeRang.value + 3;
      } else {
        timeRang.value = timeRang.value - 3;
      }
      this.list = JSON.parse(JSON.stringify(defaultList()));
      this.getHotWorldEvent();
    }
  }
};
</script>
<style scoped lang="less">
.word-slide {
  // display: flex;

}
.word-cnt {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 16px;
  position: relative;
  width: 100%;
  // margin-left: 24px;
  div.word-bg {
    width: 33.33%;
    height: 148px;
    max-height: 148px;
    overflow-y: auto;
    padding-left: 2px;
    padding-right: 2px;
    &:nth-child(1) {
      margin-left: 24px;
    }
    &::-webkit-scrollbar {
      width: 0px;
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #1F3B8A;
      }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #EDEDED;
    }
  }
  .c-bd {
    width: 2px;
    flex-shrink: 0;
    height: 149px;
    background: #0092FF;
    opacity: 0.58;
    border-radius: 100px;
    position: absolute;
    left: 33.33%;
  }
  .c-bd2 {
    left: 66.66%;
  }
  .word-each {
    font-size: 16px;
    font-weight: 400;
    color: #6AD194;
    line-height: 1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    img,.word-circle {
      // height: 12px;
      // width: ;
      margin-right: 9px;
    }
    .word-circle {
      font-size: 12px;
      text-align: center;
    }
  }
  .word-circle {
    width: 16px;
    height: 16px;
    border: 1px solid #959697;
    opacity: 0.8;
    border-radius: 100%;
    color: #fff;
  }
  .word-each-1 {
    font-size: 27px;
    color: #5DA2F4;
    margin-bottom: 8px;
    white-space: nowrap;
  }
  .word-each-2 {
    color: #F930CC;
    font-size: 22px;
    margin-bottom: 8px;
  }
  .word-each-3{
    color: #6A93D1;
    font-size: 20px;
    margin-bottom: 14px;
  }
  .word-date {
    width: 90px;
    height: 31px;
    background: #13345C;
    border: 1px solid #FFFFFF;
    border-radius: 15px;
    position: absolute;
    bottom: -36px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 28px;
  }
  .word-left , .word-right{
    width: 25px;
    height: 25px;
    background: #1E3C83;
    border-radius: 100%;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translate(0, -45%);
    color: #fff;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    i {
      margin-left: -2px;
      font-size: 12px;
    }
    &:hover {
      opacity: 0.7;
    }
  }
  .word-right {
    right: -12px;
    left: auto;
    i {
      margin-right: -2px;
      font-size: 12px;
    }
  }
  .word-empty {
    color: #fff;
    opacity: 0.5;
    text-align: center;
    margin-left: -6px;
    margin-top: 60px;
  }
}
</style>
